<template>
  <div class="content">
    <nav-title title="离职申请"/>
    <div class="line-title">表单信息</div>
    <div class="then-time">
      <div class="time-title"><span class="important">*</span>离职日期</div>
      <div class="time-val">07/01/2017</div>
    </div>

    <div class="text-box">
      <div class="text-title">
        <span></span>
        <div class="text">离职原因说明</div>
      </div>
      <textarea class="text-val" placeholder="请在这里输入..."></textarea>
    </div>
    <div class="text-box">
      <div class="text-title">
        <span></span>
        <div class="text">其他说明</div>
      </div>
      <textarea class="text-val" placeholder="请在这里输入..."></textarea>
    </div>
    <div class="instructions-title">
      <span></span>
      <div class="text">附件</div>
    </div>
    <div class="upload">
      <cube-upload
        action="xxx"
        :simultaneous-uploads="1"
        @files-added="filesAdded"
        @file-submitted="fileSubmitted"
        @file-removed="fileRemoved"></cube-upload>
      <span class="text" v-if="fileList.length === 0">点击此处上传证明材料</span>
    </div>
    <div class="sub-btn-content">
      <div class="sub-save">保存</div>
      <div class="sub-btn">提交</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'dimission-detail',
    data() {
      return {
        fileList: []
      }
    },
    methods: {
      filesAdded(file) {
        console.log(file)
      },
      fileSubmitted(file) {
        if (!this.fileList.find(value => value.name === file.name)) {
          this.fileList.push(file)
        }
        console.log(file)
      },
      fileRemoved(file) {
        this.fileList = this.fileList.filter(value => value.name !== file.name)
        console.log(file)
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .content {
    font-size: 14px;
    .text-box {
      /*display: flex;*/
      /*align-items: center;*/
      margin-top: 20px;
      .text {
        font-size: 15px;
        font-weight: 500;
      }
      .text-val {
        width: 90%;
        height: 90px;
        border: 1px solid #cccccc;
        margin-top: 10px;
        padding: 10px;
      }
      .text-title {
        display: flex;
        align-items: center;
        .text {
          margin-left: 5px;
        }
        span {
          margin-left: 10px;
          display: inline-block;
          background-color: #22ca6d;
          width: 5px;
          height: 15px;
        }
      }
    }
    .then-time {
      display: flex;
      height: 20px;
      margin: 15px auto;
      align-items: center;
      text-align: left;
      .time-title {
        flex: 1;
        margin-left: 10px;
        font-weight: 500;
      }
      .time-val {
        flex: 1;
      }
    }
    .important {
      color: red;
    }
    .line-title {
      font-size: 16px;
      height: 36px;
      background-color: #07BC4B;
      text-align: left;
      color: white;
      line-height: 36px;
      font-weight: 900;
      padding-left: 10px;
    }
    .instructions-title {
      text-align: left;
      /*margin-left: 10px;*/
      padding: 10px 0;
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      .text {
        margin-left: 5px;
        font-weight: 500;
      }
      span {
        margin-left: 10px;
        display: inline-block;
        background-color: #22ca6d;
        width: 5px;
        height: 15px;
      }
    }
    .instructions {
      color: #7e8c8d;
      padding: 20px;
      text-align: left;
      font-size: 13px;
      line-height: 20px;
      p {
        font-size: 14px;
        color: #333333;
      }
    }
    .upload {
      background-color: #eeeeee;
      display: flex;
      align-items: center;
      padding-top: 10px;
      padding-left: 10px;
      .text {
        color: #333333;
        margin-left: 20px;
        font-size: 13px;
      }
    }
    .sub-btn-content {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 30px;
      margin-top: 30px;
      .sub-save {
        width: 100px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #07BC4B;
        color: white;
        box-shadow: 3px 3px 5px #888888;
      }

      .sub-btn {
        width: 100px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F1C631;
        color: white;
        box-shadow: 3px 3px 5px #888888;
      }

      .sub-detail {
        width: 50%;
        height: 32px;
        display: flex;
        border-radius: 5px;
        align-items: center;
        justify-content: center;
        background-color: #07BC4B;
        color: white;
        box-shadow: 3px 3px 5px #888888;
      }

    }
  }

</style>
